<template>
  <div class="dashboard-container">
    <div class="dashboard-title">
      <div>组织架构</div>
      <div class="rtList">
        <div><input type="text"></div>
        <div class="aLink">导入部门</div>
        <div class="aLink">编辑部门</div>
      </div>
    </div>
    <div class="dashboard-content">
      <div class="sidebarBox">
        <div class="addDepartment">添加部门</div>
        <div class="staffTree">
          <el-tree :data="data" node-key="label" :props="defaultProps" :default-expanded-keys="['总部']" accordion @node-click="handleNodeClick"></el-tree>
        </div>
      </div>
      <div class="minCont">
        <div class="contTitle">
          <span>
              <el-upload
                ref="upload"
                action="/"
                :show-file-list="false"
                :on-change="importExcel"
                :auto-upload="false">
              <el-button
                slot="trigger"
                icon="el-icon-upload"
                size="small"
                type="primary">
                上传文件
              </el-button>
              </el-upload>
        </span>
          <span>编辑部门</span><span>调整部门</span></div>
        <div class="tableItem">
          <el-table
            ref="multipleTable"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="日期"
              width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <div class="pageList">
            <el-pagination
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import XLSX from 'xlsx'

    export default {
        name: 'Dashboard',
        data() {
            return {
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: [],
                data: [{
                    label: '传智播客',
                    children: [{
                        label: '总部',
                        children: [{
                            label: '总裁办公室'
                        },
                            {
                                label: '行政部'
                            }]
                    },
                        { label: '北京顺义区',
                            children: [{
                                label: '教研部'
                            }]
                        }
                    ]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        computed: {
            ...mapGetters([
                'name'
            ])
        },
        methods: {
            handleNodeClick(data) {
                console.log(data)
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            importExcel(file) {
                // let file = file.files[0] // 使用传统的input方法需要加上这一步
                const types = file.name.split('.')[1]
                const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
                if (!fileType) {
                    this.$message('格式错误！请重新选择')
                    return
                }
                this.file2Xce(file).then(tabJson => {
                    if (tabJson && tabJson.length > 0) {
                        this.xlsxJson = tabJson
                        console.log('数据', this.xlsxJson)
                        // xlsxJson就是解析出来的json数据,数据格式如下
                        // [
                        //   {
                        //     sheetName: sheet1
                        //     sheet: sheetData
                        //   }
                        // ]
                    }
                })
            },
            file2Xce(file) {
                return new Promise(function(resolve, reject) {
                    const reader = new FileReader()
                    reader.onload = function(e) {
                        const data = e.target.result
                        this.wb = XLSX.read(data, {
                            type: 'binary'
                        })
                        const result = []
                        this.wb.SheetNames.forEach((sheetName) => {
                            result.push({
                                sheetName: sheetName,
                                sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
                            })
                        })
                        resolve(result)
                    }
                    reader.readAsBinaryString(file.raw)
                    // reader.readAsBinaryString(file) // 传统input方法
                })
            }
        }
    }
</script>
<style lang="scss">
  .dashboard{
    &-content{
      .tableItem{
        .el-table thead th,.el-table thead tr{
          background: #edeffd;
        }
      }
      .pageList{
        .el-pager li{
          margin: 0 5px;
          min-width: 28px;
          width: 28px;
        }
        .active{
          background: #3345ff;
          border-radius: 100%;
          color:#fff;
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container{
      /*padding: 15px 0;*/
    }
    &-title {
      padding: 0 15px;
      line-height: 50px;
      background: #edeffd;
      display: flex;
      justify-content: space-between;
      .rtList{
        display: flex;
        color:#3345ff;
        font-size: 14px;
        .aLink{
          padding-left: 10px;
        }
      }
    }
    &-content{
      position: relative;
      .sidebarBox{
        position: fixed;
        height: calc(100vh - 120px);
        padding: 15px 40px;
        left: 0px;
        bottom:0px;
        width: 210px;
        background: #fff;
        .addDepartment{
          background: #3345ff;
          color:#fff;
          text-align: center;
          line-height: 35px;
          border-radius: 4px;
        }
        .staffTree{
          margin-top: 10px;
        }
      }
      .minCont{
        margin-left: 210px;
        padding:0 15px;
        .contTitle{
          line-height: 50px;
          span{
            color:#3345ff;
            padding: 0 5px;
            font-size: 14px;
          }
        }
        .tableItem{
          background: #fff;
          .pageList{
            text-align: right;
            padding: 15px;
          }
        }
      }
    }
  }
</style>
